<template>
  <!-- 辖区管理 -- 新增/编辑 -->
  <div>
    <public-modal width="1200px" :footer="false" :title="title" :publicVisible="publicVisible" @cancel="cancel">
      <div slot="content">
        <a-form-model
          :model="form"
          ref="form"
          class="formStyle addFectory"
          autocomplete="off"
          layout="vertical"
          :labelCol="{ style: 'width: 100%' }"
        >
          <!-- 企业基本信息 -->
          <div class="company-basic-info">
            <div class="title">
              <div class="icon"></div>
              企业基本信息
            </div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="企业名称:">
                  <span class="detail-value">{{ $route.query.factoryName }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="统一社会信用代码:">
                  <span class="detail-value">{{ $route.query.factoryCreditCode }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  label="企业编码:"
                  style="
                    font-size: 14px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #85fcff;
                  "
                >
                  <span class="detail-value">
                    {{ $route.query.factoryCode }}-{{ prefixZero($route.query.factoryOrder, 3) }}
                  </span>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24" style="margin-top: 60px">
              <a-col :span="8">
                <a-form-model-item label="备案联系人:">
                  <span class="detail-value">{{ $route.query.factoryUserName }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="联系电话:">
                  <span class="detail-value">{{ $route.query.factoryMobile }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="联系邮箱:">
                  <span class="detail-value">{{ $route.query.factoryMail }}</span>
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>

          <!-- 设备基本信息 -->
          <div class="device-basic-info" style="margin-top: 60px">
            <div class="title">
              <div class="icon"></div>
              设备基本信息
            </div>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="监测设备名称:" prop="factoryDeviceName">
                  <span class="detail-value">{{ form.factoryId_dictText }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="监测设备型号:" prop="deviceModel">
                  <span class="detail-value">{{ form.deviceModel }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="生产单位:" prop="productionUnit">
                  <span class="detail-value">{{ form.productionUnit }}</span>
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>

          <!-- 监测因子 -->
          <div class="checkbox-basic-info" style="margin-top: 60px">
            <div class="title">
              <div class="icon"></div>
              监测因子
            </div>
            <span class="detail-value">{{ monitoring }}</span>
          </div>

          <!-- 测量范围 -->
          <div class="device-basic-info" style="margin-top: 20px">
            <div class="title">
              <div class="icon"></div>
              测量范围
            </div>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="油烟浓度(mg/m³):">
                  <span class="detail-value">{{ form.lampblackMin }}</span>
                  <span style="margin: 0 10px; color: #02c1c7">——</span>
                  <span class="detail-value">{{ form.lampblackMax }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="颗粒物浓度(mg/m³):">
                  <span class="detail-value">{{ form.particulateMin }}</span>
                  <span style="margin: 0 10px; color: #02c1c7">——</span>
                  <span class="detail-value">{{ form.particulateMax }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="非甲烷总烃浓度(mg/m³):">
                  <span class="detail-value">{{ form.nonMethaneMin }}</span>
                  <span style="margin: 0 10px; color: #02c1c7">——</span>
                  <span class="detail-value">{{ form.nonMethaneMax }}</span>
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>

          <!-- 资质信息 -->
          <div class="device-basic-info" style="margin-top: 60px">
            <div class="title">
              <div class="icon"></div>
              资质信息
            </div>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="生产许可证:">
                  <div class="pdf-wrap" v-if="form.productionLicenseUrl">
                    <img src="@/assets/imgs/fillingManagement/pdf.png" class="com-img" />

                    <div class="content">
                      <span class="fileName">{{ form.productionLicenseName }}</span>

                      <span class="preview" @click="pdfPreview(imgPrefix + form.productionLicenseUrl)">
                        <img src="@/assets/imgs/fillingManagement/preview.png" alt="" />
                        预览
                      </span>
                    </div>
                  </div>

                  <div class="pdf-wrap" v-else style="line-height: 80px">暂未提交</div>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="检验报告/检定报告:">
                  <div class="pdf-wrap">
                    <img src="@/assets/imgs/fillingManagement/pdf.png" class="com-img" />

                    <div class="content">
                      <span class="fileName">{{ form.inspectionReportName }}</span>

                      <span class="preview" @click="pdfPreview(imgPrefix + form.inspectionReportUrl)">
                        <img src="@/assets/imgs/fillingManagement/preview.png" alt="" />
                        预览
                      </span>
                    </div>
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="校准证书报告:">
                  <div class="pdf-wrap">
                    <img src="@/assets/imgs/fillingManagement/pdf.png" class="com-img" />

                    <div class="content">
                      <span class="fileName">{{ form.calibrationCertificateName }}</span>

                      <span class="preview" @click="pdfPreview(imgPrefix + form.calibrationCertificateUrl)">
                        <img src="@/assets/imgs/fillingManagement/preview.png" alt="" />
                        预览
                      </span>
                    </div>
                  </div>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24" style="margin-top: 135px">
              <a-col :span="8">
                <a-form-model-item label="认证证书:">
                  <div class="pdf-wrap">
                    <img src="@/assets/imgs/fillingManagement/pdf.png" class="com-img" />
                    <div class="content">
                      <span class="fileName">{{ form.authenticationCertificateName }}</span>

                      <span class="preview" @click="pdfPreview(imgPrefix + form.authenticationCertificateUrl)">
                        <img src="@/assets/imgs/fillingManagement/preview.png" alt="" />
                        预览
                      </span>
                    </div>
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="设备使用说明书:">
                  <div class="pdf-wrap">
                    <img src="@/assets/imgs/fillingManagement/pdf.png" class="com-img" />
                    <div class="content">
                      <span class="fileName">{{ form.instructionsName }}</span>

                      <span class="preview" @click="pdfPreview(imgPrefix + form.instructionsUrl)">
                        <img src="@/assets/imgs/fillingManagement/preview.png" alt="" />
                        预览
                      </span>
                    </div>
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :span="8"></a-col>
            </a-row>
          </div>

          <!-- 设备照片 -->
          <div class="device-basic-info" style="margin-top: 145px">
            <div class="title">
              <div class="icon"></div>
              设备照片
            </div>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="内部清晰照片:">
                  <img
                    class="img-wrap"
                    :id="form.internalUrl"
                    :src="imgPrefix + form.internalUrl"
                    :data-original="imgPrefix + form.internalUrl"
                    @click="werImg(form.internalUrl)"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="外部清晰照片:">
                  <img
                    class="img-wrap"
                    :id="form.externalUrl"
                    :src="imgPrefix + form.externalUrl"
                    :data-original="imgPrefix + form.externalUrl"
                    @click="werImg(form.externalUrl)"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="铭牌照片:">
                  <img
                    class="img-wrap"
                    :id="form.nameplateUrl"
                    :src="imgPrefix + form.nameplateUrl"
                    :data-original="imgPrefix + form.nameplateUrl"
                    @click="werImg(form.nameplateUrl)"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </a-form-model>
      </div>
      <div slot="footer"></div>
    </public-modal>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'
import { prefixZero } from '@/utils/util'

export default {
  name: 'add',
  mixins: [comMethods],
  components: { publicModal },
  data() {
    return {
      title: '备案设备型号详情',
      checkBoxList: [],
      publicVisible: false,
      imgPrefix: '',
      monitoring: '', // 检控值

      form: {},
    }
  },
  mounted() {},
  methods: {
    prefixZero,
    async show(records) {
      this.form = { ...records }
      console.log(this.form, 'this.form')
      // 处理监控信息值
      this.checkBoxList = JSON.parse(localStorage.getItem('factoryMonitoringType'))
      let a = this.form.monitoringFactors
        .split(',')
        .map((el) => this.checkBoxList.find((item) => item.value === el).title)
      this.monitoring = a.join('、')

      this.publicVisible = true
    },

    pdfPreview(url) {
      console.log(url)
      const a = document.createElement('a')
      a.href = url
      a.target = '_blank'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show() // 点击图片放大注销此方法
    },
    cancel() {
      this.publicVisible = false
      this.form = {}
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .ant-form-item-children {
  display: flex;
  align-items: center;
}

.formStyle {
  padding: 0.2rem 0.5rem 1.8rem 0.5rem;

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .icon {
      width: 8px;
      height: 8px;
      margin-right: 6px;
      background: #00f8ff;
    }
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #00f8ff;
  }
}

.detail-value {
  font-size: 0.14rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #85fcff;
}

.pdf-wrap {
  width: 360px;
  height: 80px;
  background: rgba(8, 85, 88, 0.7804);
  border-radius: 4px;
  border: 1px solid #036265;

  padding: 0 0.14rem;
  display: flex;
  // align-content: center;

  font-size: 0.14rem;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #02c1c7;

  .com-img {
    width: 39px;
    height: 42px;
    margin-right: 18px;
    align-self: center;
  }

  .content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .fileName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .preview {
    cursor: pointer;
    color: #00fe9f;
  }
}

.img-wrap {
  width: 360px;
  height: 147px;
  border-radius: 4px;
  cursor: pointer;
  object-fit: cover;
}
</style>
